I cloned the meanjs and running with npm install and grunt
at the start up it shows debugger listening on port 5858,
but when i open the chrome with
localhost:8080/debug?port=5858
it shows the webpage is not available.
is there anything i need to do to make the node-inspector debugger to work for meanjs ?
Ok, if you're using the Gruntfile from the Yeoman Generator (meanjs.org) as I presume, just run grunt debug instead of simply grunt in your console. Then the node inspector will be available at http://localhost:1337/debug?port=5858 if you have default settings like:
watch: {
serverViews: {
files: watchFiles.serverViews,
options: {
livereload: true
}
},
serverJS: {
files: watchFiles.serverJS,
tasks: ['jshint'],
options: {
livereload: true
}
},
clientViews: {
files: watchFiles.clientViews,
options: {
livereload: true,
}
},
clientJS: {
files: watchFiles.clientJS,
tasks: ['jshint'],
options: {
livereload: true
}
},
clientCSS: {
files: watchFiles.clientCSS,
tasks: ['csslint'],
options: {
livereload: true
}
}
},
nodemon: {
dev: {
script: 'server.js',
options: {
nodeArgs: ['--debug'],
ext: 'js,html',
watch: watchFiles.serverViews.concat(watchFiles.serverJS)
}
}
},
'node-inspector': {
custom: {
options: {
'web-port': 1337,
'web-host': 'localhost',
'debug-port': 5858,
'save-live-edit': true,
'no-preload': true,
'stack-trace-limit': 50,
'hidden': []
}
}
},
concurrent: {
default: ['nodemon', 'watch'],
debug: ['nodemon', 'watch', 'node-inspector'],
options: {
logConcurrentOutput: true,
limit: 10
}
}
And the main cli tasks are defined at the bottom of the gruntfile:
// Default task(s).
grunt.registerTask('default', ['lint', 'concurrent:default']);
// Debug task.
grunt.registerTask('debug', ['lint', 'concurrent:debug']);
You need to start the node inspector server, that one will listen on 8080:
node-inspector
Then you're ready to hit the debug URL
Related
The default Nightwatch.js output consumes one line per passed test. For example,
✔ Testing if element <body> contains text 'lecture is so boring' (12ms)
✔ Testing if element <button[id=btn1]> is visible (6ms)
✔ Testing if element <button[id=btn]> is visible (10ms)
✔ Testing if element <#fill1> is visible (19ms)
✔ Testing if element <#fill2> is visible (18ms)
✔ Testing if element <#fill3> is visible (20ms)
Currently Nightwatch consumes far more of my screen than the rest of my build output combined. On the CLI on Linux, appending
|grep -v "✔"
to the command mostly alleviates that but has the disadvantage of stripping colored text (even with --color=always) when calling nightwatch from gulp. Is there a configuration option or command line parameter to minimize output and only show failed tests?
Ideally, if all tests pass, I would prefer just one line of output, but that may be asking too much. Using the grep above, this still results, which remains too much for my taste.
[Nightwatch] Test Suite
=======================
ℹ Connected to localhost on port 4444 (1133ms).
Using: firefox (91.0.1) on linux 4.19.0-18-amd64 platform.
Running: Demo of Quiz
OK. 51 assertions passed. (3.498s)
I'd really just like it to say
Nightwatch: 51 assertions passed. (3.498s)
or similar.
My config file:
// Autogenerated by Nightwatch
// Refer to the online docs for more details: https://nightwatchjs.org/gettingstarted/configuration/
const Services = {}; loadServices();
module.exports = {
// An array of folders (excluding subfolders) where your tests are located;
// if this is not specified, the test source must be passed as the second argument to the test runner.
src_folders: ['src/ts/test/functional'],
// See https://nightwatchjs.org/guide/working-with-page-objects/
page_objects_path: '',
// See https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-commands
custom_commands_path: '',
// See https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-assertions
custom_assertions_path: '',
// See https://nightwatchjs.org/guide/#external-globals
globals_path : '',
webdriver: {},
test_settings: {
default: {
disable_error_log: false,
launch_url: 'https://nightwatchjs.org',
screenshots: {
enabled: false,
path: 'screens',
on_failure: true
},
desiredCapabilities: {
browserName : 'firefox'
},
webdriver: {
start_process: true,
server_path: (Services.geckodriver ? Services.geckodriver.path : '')
}
},
firefox: {
desiredCapabilities : {
browserName : 'firefox',
alwaysMatch: {
// Enable this if you encounter unexpected SSL certificate errors in Firefox
// acceptInsecureCerts: true,
'moz:firefoxOptions': {
args: [
// '-headless',
// '-verbose'
],
}
}
},
webdriver: {
start_process: true,
port: 4444,
server_path: (Services.geckodriver ? Services.geckodriver.path : ''),
cli_args: [
// very verbose geckodriver logs
// '-vv'
]
}
},
chrome: {
desiredCapabilities : {
browserName : 'chrome',
chromeOptions : {
// This tells Chromedriver to run using the legacy JSONWire protocol (not required in Chrome 78)
// w3c: false,
// More info on Chromedriver: https://sites.google.com/a/chromium.org/chromedriver/
args: [
//'--no-sandbox',
//'--ignore-certificate-errors',
//'--allow-insecure-localhost',
//'--headless'
]
}
},
webdriver: {
start_process: true,
port: 9515,
server_path: (Services.chromedriver ? Services.chromedriver.path : ''),
cli_args: [
// --verbose
]
}
},
//////////////////////////////////////////////////////////////////////////////////
// Configuration for when using the browserstack.com cloud service |
// |
// Please set the username and access key by setting the environment variables: |
// - BROWSERSTACK_USER |
// - BROWSERSTACK_KEY |
// .env files are supported |
//////////////////////////////////////////////////////////////////////////////////
browserstack: {
selenium: {
host: 'hub-cloud.browserstack.com',
port: 443
},
// More info on configuring capabilities can be found on:
// https://www.browserstack.com/automate/capabilities?tag=selenium-4
desiredCapabilities: {
'bstack:options' : {
local: 'false',
userName: '${BROWSERSTACK_USER}',
accessKey: '${BROWSERSTACK_KEY}',
}
},
disable_error_log: true,
webdriver: {
keep_alive: true,
start_process: false
}
},
'browserstack.chrome': {
extends: 'browserstack',
desiredCapabilities: {
browserName: 'chrome',
chromeOptions : {
// This tells Chromedriver to run using the legacy JSONWire protocol
// More info on Chromedriver: https://sites.google.com/a/chromium.org/chromedriver/
w3c: false
}
}
},
'browserstack.firefox': {
extends: 'browserstack',
desiredCapabilities: {
browserName: 'firefox'
}
},
'browserstack.ie': {
extends: 'browserstack',
desiredCapabilities: {
browserName: 'IE',
browserVersion: '11.0',
'bstack:options' : {
os: 'Windows',
osVersion: '10',
local: 'false',
seleniumVersion: '3.5.2',
resolution: '1366x768'
}
}
},
//////////////////////////////////////////////////////////////////////////////////
// Configuration for when using the Selenium service, either locally or remote, |
// like Selenium Grid |
//////////////////////////////////////////////////////////////////////////////////
selenium: {
// Selenium Server is running locally and is managed by Nightwatch
selenium: {
start_process: true,
port: 4444,
server_path: (Services.seleniumServer ? Services.seleniumServer.path : ''),
cli_args: {
'webdriver.gecko.driver': (Services.geckodriver ? Services.geckodriver.path : ''),
'webdriver.chrome.driver': (Services.chromedriver ? Services.chromedriver.path : '')
}
}
},
'selenium.chrome': {
extends: 'selenium',
desiredCapabilities: {
browserName: 'chrome',
chromeOptions : {
w3c: false
}
}
},
'selenium.firefox': {
extends: 'selenium',
desiredCapabilities: {
browserName: 'firefox',
'moz:firefoxOptions': {
args: [
// '-headless',
// '-verbose'
]
}
}
}
}
};
function loadServices() {
try {
Services.seleniumServer = require('selenium-server');
} catch (err) {}
try {
Services.chromedriver = require('chromedriver');
} catch (err) {}
try {
Services.geckodriver = require('geckodriver');
} catch (err) {}
}
Edit: Just to mark it as answered
You need to add detailed_output: false in your nightwatch config file.
Imagine I have OrderComponent and CustomerComponent that represent two screens.
In the web version you can create a new customer while in the order screen by launching the customer component inside a popup. So OrderComponent references CustomerComponent directly in the template. So I have to keep both in the same FeaturesModule for this to work.
On the other hand in the Nativescript mobile version, there is no such capability and so the two components/screens are completely independent, so I would like to put them in 2 separate modules: OrderModule, and CustomerModule. And lazy load them so the app launches faster.
In my real application of course it's not just 2 components but several dozens so the mobile app performance is a more pressing issue.
When I try to add a module file with the tns extension like this: order.module.tns.ts, without the corresponding web file, it seems as if the NativeScript bundler is not picking it up, I get the following error:
ERROR: C:\...\src\app\features\orders\orders.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
at AngularCompilerPlugin.getCompiledFile (C:\Users\...\node_modules\#ngtools\webpack\src\angular_compiler_plugin.js:753:23)
at plugin.done.then (C:\Users\...\node_modules\#ngtools\webpack\src\loader.js:41:31)
at process._tickCallback (internal/process/next_tick.js:68:7)
# ../$$_lazy_route_resource lazy namespace object ./features/measurement-units/measurement-units.module
# ../node_modules/#angular/core/fesm5/core.js
# ../node_modules/nativescript-angular/platform.js
# ./main.ns.ts
But according to the docs, all I have to do to make a nativescript specific component is add it with the tns extension. Is there another step to make this work for module files?? Help is appreciated
Update
Here is my tsconfig.tns.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"~/*": [
"src/*"
],
"*": [
"./node_modules/tns-core-modules/*",
"./node_modules/*"
]
}
}
}
Update 2
My webpack.config.js:
const { join, relative, resolve, sep } = require("path");
const webpack = require("webpack");
const nsWebpack = require("nativescript-dev-webpack");
const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
const { nsReplaceBootstrap } = require("nativescript-dev-webpack/transformers/ns-replace-bootstrap");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const { AngularCompilerPlugin } = require("#ngtools/webpack");
module.exports = env => {
// Add your custom Activities, Services and other Android app components here.
const appComponents = [
"tns-core-modules/ui/frame",
"tns-core-modules/ui/frame/activity",
];
const platform = env && (env.android && "android" || env.ios && "ios");
if (!platform) {
throw new Error("You need to provide a target platform!");
}
const projectRoot = __dirname;
// Default destination inside platforms/<platform>/...
const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
const {
// The 'appPath' and 'appResourcesPath' values are fetched from
// the nsconfig.json configuration file
// when bundling with `tns run android|ios --bundle`.
appPath = "app",
appResourcesPath = "app/App_Resources",
// You can provide the following flags when running 'tns run android|ios'
aot, // --env.aot
snapshot, // --env.snapshot
uglify, // --env.uglify
report, // --env.report
sourceMap, // --env.sourceMap
hmr, // --env.hmr,
} = env;
const externals = (env.externals || []).map((e) => { // --env.externals
return new RegExp(e + ".*");
});
const appFullPath = resolve(projectRoot, appPath);
const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
const entryModule = `${nsWebpack.getEntryModule(appFullPath)}.ts`;
const entryPath = `.${sep}${entryModule}`;
const ngCompilerPlugin = new AngularCompilerPlugin({
hostReplacementPaths: nsWebpack.getResolver([platform, "tns"]),
platformTransformers: aot ? [nsReplaceBootstrap(() => ngCompilerPlugin)] : null,
mainPath: resolve(appPath, entryModule),
tsConfigPath: join(__dirname, "tsconfig.tns.json"),
skipCodeGeneration: !aot,
sourceMap: !!sourceMap,
});
const config = {
mode: uglify ? "production" : "development",
context: appFullPath,
externals,
watchOptions: {
ignored: [
appResourcesFullPath,
// Don't watch hidden files
"**/.*",
]
},
target: nativescriptTarget,
entry: {
bundle: entryPath,
},
output: {
pathinfo: false,
path: dist,
libraryTarget: "commonjs2",
filename: "[name].js",
globalObject: "global",
},
resolve: {
extensions: [".ts", ".js", ".scss", ".css"],
// Resolve {N} system modules from tns-core-modules
modules: [
resolve(__dirname, "node_modules/tns-core-modules"),
resolve(__dirname, "node_modules"),
"node_modules/tns-core-modules",
"node_modules",
],
alias: {
'~': appFullPath
},
symlinks: true
},
resolveLoader: {
symlinks: false
},
node: {
// Disable node shims that conflict with NativeScript
"http": false,
"timers": false,
"setImmediate": false,
"fs": "empty",
"__dirname": false,
},
devtool: sourceMap ? "inline-source-map" : "none",
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
name: "vendor",
chunks: "all",
test: (module, chunks) => {
const moduleName = module.nameForCondition ? module.nameForCondition() : '';
return /[\\/]node_modules[\\/]/.test(moduleName) ||
appComponents.some(comp => comp === moduleName);
},
enforce: true,
},
}
},
minimize: !!uglify,
minimizer: [
new UglifyJsPlugin({
parallel: true,
cache: true,
uglifyOptions: {
output: {
comments: false,
},
compress: {
// The Android SBG has problems parsing the output
// when these options are enabled
'collapse_vars': platform !== "android",
sequences: platform !== "android",
}
}
})
],
},
module: {
rules: [
{
test: new RegExp(entryPath),
use: [
// Require all Android app components
platform === "android" && {
loader: "nativescript-dev-webpack/android-app-components-loader",
options: { modules: appComponents }
},
{
loader: "nativescript-dev-webpack/bundle-config-loader",
options: {
angular: true,
loadCss: !snapshot, // load the application css if in debug mode
}
},
].filter(loader => !!loader)
},
{ test: /\.html$|\.xml$/, use: "raw-loader" },
// tns-core-modules reads the app.css and its imports using css-loader
{
test: /[\/|\\]app\.css$/,
use: {
loader: "css-loader",
options: { minimize: false, url: false },
}
},
{
test: /[\/|\\]app\.scss$/,
use: [
{ loader: "css-loader", options: { minimize: false, url: false } },
"sass-loader"
]
},
// Angular components reference css files and their imports using raw-loader
{ test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: "raw-loader" },
{ test: /\.scss$/, exclude: /[\/|\\]app\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] },
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
use: [
"nativescript-dev-webpack/moduleid-compat-loader",
"#ngtools/webpack",
]
},
// Mark files inside `#angular/core` as using SystemJS style dynamic imports.
// Removing this will cause deprecation warnings to appear.
{
test: /[\/\\]#angular[\/\\]core[\/\\].+\.js$/,
parser: { system: true },
},
],
},
plugins: [
// Define useful constants like TNS_WEBPACK
new webpack.DefinePlugin({
"global.TNS_WEBPACK": "true",
"process": undefined,
}),
// Remove all files from the out dir.
new CleanWebpackPlugin([`${dist}/**/*`]),
// Copy native app resources to out dir.
new CopyWebpackPlugin([
{
from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
context: projectRoot
},
]),
// Copy assets to out dir. Add your own globs as needed.
new CopyWebpackPlugin([
{ from: "fonts/**" },
{ from: "**/*.jpg" },
{ from: "**/*.png" },
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
// Generate a bundle starter script and activate it in package.json
new nsWebpack.GenerateBundleStarterPlugin([
"./vendor",
"./bundle",
]),
// For instructions on how to set up workers with webpack
// check out https://github.com/nativescript/worker-loader
new NativeScriptWorkerPlugin(),
ngCompilerPlugin,
// Does IPC communication with the {N} CLI to notify events when running in watch mode.
new nsWebpack.WatchStateLoggerPlugin(),
],
};
if (report) {
// Generate report files for bundles content
config.plugins.push(new BundleAnalyzerPlugin({
analyzerMode: "static",
openAnalyzer: false,
generateStatsFile: true,
reportFilename: resolve(projectRoot, "report", `report.html`),
statsFilename: resolve(projectRoot, "report", `stats.json`),
}));
}
if (snapshot) {
config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
chunk: "vendor",
angular: true,
requireModules: [
"reflect-metadata",
"#angular/platform-browser",
"#angular/core",
"#angular/common",
"#angular/router",
"nativescript-angular/platform-static",
"nativescript-angular/router",
],
projectRoot,
webpackConfig: config,
}));
}
if (hmr) {
config.plugins.push(new webpack.HotModuleReplacementPlugin());
}
return config;
};
I am receiving the error "file to import not found or unreadable: "compass"" when I am attempting to run my "grunt" task.
"Running "sass:app" (sass) task"
Warning: build/global/css/base:1: file to import not found or unreadable: "compass"
Here is my gruntfile:
module.exports = function(grunt) {
// COMMANDS
// comple css and js - $ grunt
// optim - run $ grunt imgoptim
// FILE STRUCTURE
// css/app.css, css/app.min.css
// build/global/css/*.scss
// build/global/css/**/*.scss
// build/components/componentname/css/*.scss
// css/singlefile.css, css/singlefile.min.css
// build/global/solo/css/*.scss
// js/app.js, js/app.min.css
// build/global/js/*.js
// build/global/js/**/*.js
// build/components/componentname/js/*.js
// singlefile.js, singlefile.min.js
// build/global/solo/js/*.js
var watch = {};
var uglify = {};
var concat = {};
var sass = {};
var cssmin = {};
var js_files = [
'build/global/js/vendor/respond.js',
'build/global/js/vendor/AccessifyHTML5.js',
'build/global/js/vendor/jquery.equalHeights.js',
'build/global/js/vendor/jquery.infinitescroll.js',
'build/global/js/vendor/jquery.verticalcentering.js',
'build/global/js/global.js',
'build/components/**/js/vendor/*.js',
'build/components/**/js/*.js'
];
// WATCH =========================================/
watch.solocss = {
options: { livereload: true }, // currently not working correctly, should be able to remove this line
livereload: {
options: { livereload: true },
files: ['css/*.css', '!css/*.min.css']
},
files: 'build/solo/css/*.scss',
tasks: [
'newer:sass:solo'
]
};
watch.appcss = {
options: { livereload: true }, // currently not working correctly, should be able to remove this line
livereload: {
options: { livereload: true },
files: ['css/*.css', '!css/*.min.css']
},
files: [
'build/global/css/**/*.scss',
'build/global/css/*.scss',
'build/components/**/*.scss'
],
tasks: [
'sass:app',
'concat:appcss',
'sass:solo' // run solo here too incase there are changes to sass vars etc
]
};
watch.cssmin = {
files: ['css/*.css', '!css/*.min.css'],
tasks: [
'newer:cssmin:compress',
]
};
watch.solojs = {
options: { livereload: true }, // currently not working correctly, should be able to remove this line
livereload: {
options: { livereload: true },
files: ['js/*.js', '!js/*.min.js']
},
files: 'build/solo/js/*.js',
tasks: [
'newer:uglify:solojsdev',
'newer:uglify:solojsprod'
]
};
watch.globaljs = {
options: { livereload: true }, // currently not working correctly, should be able to remove this line
livereload: {
options: { livereload: true },
files: ['js/*.js', '!js/*.min.js']
},
files: ['build/global/js/*.js', 'build/global/js/**/*.js', 'build/components/**/*.js'],
tasks: [
'concat:appjs',
'uglify:appjs'
]
};
// CSS COMPLILATION ====================================/
//solo files, compiled to /css/file.css
sass.solo = {
options:{
includePaths: require('node-bourbon').with('build'),
sourceComments: true,
style: 'expanded', // compile in expanded format with comments for dev,
compass: true
},
files: [{
expand: true,
src: watch.solocss.files, // where it's coming from
dest: 'css', // where it's going
flatten: true, // removes folder tree
ext: '.css', // what file extension to give it - standard
extDot: 'last'
}]
};
// app scss files, compiled individually to /css/build/...
sass.app = {
options:{
includePaths: require('node-bourbon').with('build'),
style: 'expanded', // compile in expanded format with comments for dev
sourceComments: 'normal',
},
files: [{
//cwd: 'build',
expand: true,
src: watch.appcss.files, // where it's coming from
dest: 'css', // where it's going
ext: '.css' // what file extension to give it - standard
}]
};
// concat app.css files
concat.appcss = {
src: [
'css/build/global/css/**/*.css',
'css/build/global/css/*.css',
'css/build/components/**/*.css'
],
dest: 'css/app.css',
seperator: '\n'
};
// create compressed version of all css files for prod
cssmin.compress = {
files: [{
expand: true,
cwd: 'css/',
src: ['*.css', '!*.min.css', '!editor.css'],
dest: 'css/',
ext: '.min.css',
extDot: 'last'
}]
}
// JAVASCRIPT COMPLILATION ============================/
// concat app.js files
concat.appjs = {
src: js_files,
dest: 'js/app.js',
separator: ';'
};
// minify app.js
uglify.appjs = {
files: {
'js/app.min.js': [
'js/app.js'
]
}
};
// uglify solo files for dev
uglify.solojsdev = {
options: {
compress: false,
mangle: false,
beautify: true
},
files: [{
expand: true,
flatten: true, // removes folder tree
src: watch.solojs.files,
dest: 'js/'
}]
};
// uglify + minify solo files for prod
uglify.solojsprod = {
options: {
compress: true
},
files: [{
expand: true,
flatten: true, // removes folder tree
src: watch.solojs.files,
dest: 'js/',
ext: '.min.js',
extDot: 'last',
}]
};
// IMAGE OPTIMISATION ==========================/
imageoptim = {
optimise: {
src: ['images']
}
}
// GRUNT ======================================/
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: watch,
sass: sass,
concat: concat,
cssmin: cssmin,
uglify: uglify,
imageoptim: imageoptim
});
// DEPENDENT PLUGINS =========================/
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-imageoptim');
grunt.loadNpmTasks('grunt-newer');
// TASKS =====================================/
grunt.registerTask('default', [
'sass',
'concat',
'newer:cssmin',
'newer:uglify',
'watch'
]);
grunt.registerTask('imgoptim', [
'imageoptim'
]);
}
My directory structure looks like the following relative from the gruntfile.js:
/build/global/components/FOLDERS/*.scss files
/build/global/css/FOLDERS & *.scss files
/dist/*.css files
Here is my config.rb file in the same directory as the gruntfile:
http_path = "/"
css_dir = "css"
sass_dir = "build"
images_dir = "images"
javascripts_dir = "javascript"
I already have compass installed and all the node_modules.
I'm working on a multi-website project where all the website share the same structure:
-sites
-site1
-css
-scss
-site2
-css
-scss
In my gruntfile.js i have my sass task wrote this way:
sass: {
options: {
sourceMap: true,
outputStyle: 'compressed'
},
pippo: {
files: {
'sites/site1/css/main.css': 'sites/site1/css/sass/main.scss',
'sites/site2/css/main.css': 'sites/site2/css/sass/main.scss',
}
}
}
is it possible to write it in this way?
sass: {
options: {
sourceMap: true,
outputStyle: 'compressed'
},
pippo: {
files: {
'sites/**/css/main.css': 'sites/**/css/sass/main.scss'
}
}
}
I tested it and it is adding a new ** folder when I build it... Any advice?
after a couple of hours I found a working solution, at the very top of the grunt file I added:
module.exports = function(grunt) {
var fs = require('fs');
console.log("Inside the gruntfile");
//create dynamic list of scss file paths
var objDestSource = {
'public/css/main.css': 'public/css/sass/main.scss'
};
fs.readdirSync('sites').forEach(function(folder){
objDestSource['sites/'+folder+'/css/main.css'] = 'sites/'+folder+'/css/sass/main.scss';
});
console.log(objDestSource);
// end scss function
while in the grunt sass task I just changed to:
sass: {
options: {
sourceMap: true,
outputStyle: 'compressed'
},
taskName: {
files: objDestSource
}
}
and the watch task:
watch: {
sass: {
files: [
'public/css/sass/**/*.scss',
'sites/**/css/sass/**/*.scss'
],
tasks: ['sass'],
options: {
spawn: false
}
}
}
This way I can add a new sub-website without have to edit the gruntfile each time!
Beginning with Grunt, which I love but cannot make it work as I get continously an error with my sass implementation. I get the following alerts:
Danis-MacBook-Pro:020 DanielRamirez$ grunt
Running "concat:dist" (concat) task
File "js/build/production.js" created.
Running "uglify:build" (uglify) task
File js/build/production.min.js created.
>> No "sass" targets found.
Warning: Task "sass" failed. Use --force to continue.
Aborted due to warnings.
Danis-MacBook-Pro:020 DanielRamirez$
If I --force I get the following:
Danis-MacBook-Pro:020 DanielRamirez$ grunt
Running "concat:dist" (concat) task
File "js/build/production.js" created.
Running "uglify:build" (uglify) task
File js/build/production.min.js created.
>> No "sass" targets found.
Warning: Task "sass" failed. Use --force to continue.
Aborted due to warnings.
Danis-MacBook-Pro:020 DanielRamirez$
This is my Gruntfile.js:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// 2. Configuration for concatinating files goes here.
// Concatonate various files into one
concat: {
dist: {
src: [
'js/vendor/*.js', // All JS in the libs folder
'js/plugin.js', // All JS in the libs folder
'js/global.js' // This specific file
],
dest: 'js/build/production.js',
}
},
// Creates a minified version of the javascript files of the project
uglify: {
build: {
src: ['js/vendor/*.js', 'js/plugin.js', 'js/global.js'],
dest: 'js/build/production.min.js'
}
},
// Minifies automatically the images of the project
// imagemin: {
// dynamic: {
// files: [{
// expand: true,
// cwd: 'images/',
// src: ['**/*.{png,jpg,gif}'],
// dest: 'images/build/'
// }]
// }
// },
// Watches for changes done on the project and builds the commands if neccesary
watch: {
options: {
livereload: true,
},
scripts: {
files: ['js/*.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
},
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'css/build/style.css': 'sass/style.scss'
}
}
},
css: {
files: ['css/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'uglify', 'sass', 'compass', 'watch']);
};
Any ideas?
Yes, what you've done is put the entire Sass configuration inside the watch config. Grunt does not work this way. Instead, change your config to something like this:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// 2. Configuration for concatinating files goes here.
// Concatonate various files into one
concat: {
dist: {
src: [
'js/vendor/*.js', // All JS in the libs folder
'js/plugin.js', // All JS in the libs folder
'js/global.js' // This specific file
],
dest: 'js/build/production.js',
}
},
// Creates a minified version of the javascript files of the project
uglify: {
build: {
src: ['js/vendor/*.js', 'js/plugin.js', 'js/global.js'],
dest: 'js/build/production.min.js'
}
},
// Compile sass to css
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'css/build/style.css': 'sass/style.scss'
}
}
},
// Minifies automatically the images of the project
// imagemin: {
// dynamic: {
// files: [{
// expand: true,
// cwd: 'images/',
// src: ['**/*.{png,jpg,gif}'],
// dest: 'images/build/'
// }]
// }
// },
// Watches for changes done on the project and builds the commands if neccesary
watch: {
options: {
livereload: true,
},
scripts: {
files: ['js/*.js'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
},
},
css: {
files: ['css/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['concat', 'uglify', 'sass', 'compass', 'watch']);
};